// tour-guide.js
const storageManager = require('../../manager/storageManager').getInstance();

Component({
  properties: {
    // 是否显示引导
    visible: {
      type: Boolean,
      value: false,
      observer: function(newVal) {
        if (newVal) {
          this.startTour();
        }
      }
    },
    
    // 引导步骤配置
    steps: {
      type: Array,
      value: []
    },
    
    // 当前步骤索引
    currentStepIndex: {
      type: Number,
      value: 0
    },
    
    // 是否自动开始
    autoStart: {
      type: Boolean,
      value: true
    },
    

    
    // 是否禁用点击遮罩层关闭
    disableOverlayClose: {
      type: Boolean,
      value: true
    }
  },

  data: {
    // 当前步骤索引
    currentIndex: 0,
    // 当前步骤数据
    currentStep: {},
    // 高亮区域位置信息
    highlightRect: {
      top: 0,
      left: 0,
      width: 0,
      height: 0
    },
    // 提示框位置信息
    tooltipRect: {
      top: 0,
      left: 0
    },
    // 提示框位置（top, bottom, left, right）
    tooltipPosition: 'bottom',
    // 箭头位置
    arrowPosition: 'bottom',
    // 动画数据
    tooltipAnimation: {},
    // 动画状态
    isAnimating: false
  },

  lifetimes: {
    attached() {
      // 初始化动画
      this.tooltipAnimation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
        transformOrigin: 'center'
      });
      
      // 如果自动开始且visible为true
      if (this.data.autoStart && this.data.visible) {
        this.startTour();
      }
    },
    
    detached() {
      // 清理定时器等
      if (this.animationTimer) {
        clearTimeout(this.animationTimer);
      }
    }
  },

  methods: {
    // 开始引导
    startTour() {
      if (!this.data.steps || this.data.steps.length === 0) {
        console.warn('Tour guide: No steps defined');
        return;
      }
      
      // 初始化当前索引
      const index = Math.max(0, Math.min(this.data.currentStepIndex, this.data.steps.length - 1));
      this.setData({ currentIndex: index });
      
      // 显示第一步
      this.showCurrentStep();
    },
    
    // 显示当前步骤
    showCurrentStep() {
      const { currentIndex, steps } = this.data;
      const currentStep = steps[currentIndex];
      
      if (!currentStep) return;
      
      // 更新当前步骤数据
      this.setData({ currentStep });
      
      // 计算位置
      this.calculatePosition(currentStep);
      
      // 触发动画
      this.playTooltipAnimation();
      
      // 触发步骤显示事件
      this.triggerEvent('stepChange', {
        currentStep: currentStep,
        currentIndex: currentIndex,
        totalSteps: steps.length
      });
    },
    
    // 计算位置并确保元素可见
  calculatePosition(step) {
    // 如果有selector，获取元素位置
    if (step.selector) {
      try {
        // 移除.in(this)，使用全局选择器查询页面元素
        const query = wx.createSelectorQuery();
        query.select(step.selector).boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            const rect = res[0];
            
            // 确保元素在可视区域内
            this.scrollElementIntoView(rect);
            
            // 延迟更新位置，确保滚动完成
            setTimeout(() => {
              // 重新获取元素位置，因为滚动后位置可能变化
              const newQuery = wx.createSelectorQuery();
              newQuery.select(step.selector).boundingClientRect();
              newQuery.exec((newRes) => {
                if (newRes && newRes[0]) {
                  const newRect = newRes[0];
                  this.updatePosition(newRect, step);
                } else {
                  this.updatePosition(rect, step);
                }
              });
            }, 300);
          } else {
            console.warn(`Tour guide: Cannot find element with selector ${step.selector}`);
            // 使用默认居中位置
            this.updatePosition(null, step);
          }
        });
      } catch (error) {
        console.error('Tour guide: Error calculating position', error);
        this.updatePosition(null, step);
      }
    } else {
      // 使用默认居中位置或自定义位置
      this.updatePosition(null, step);
    }
  },
  
  // 滚动元素到可视区域
  scrollElementIntoView(elementRect) {
    const { windowHeight } = wx.getSystemInfoSync();
    const { top, bottom, height } = elementRect;
    
    // 计算元素中心点
    const elementCenter = top + height / 2;
    // 计算视窗中心点
    const viewportCenter = windowHeight / 2;
    
    // 如果元素不在可视区域或靠近边缘，进行滚动
    const padding = 80; // 上下边距，留出更多空间
    
    if (top < padding || bottom > windowHeight - padding) {
      // 计算需要滚动的距离
      const scrollDistance = elementCenter - viewportCenter;
      
      // 首先尝试使用页面滚动
      wx.pageScrollTo({
        scrollTop: Math.max(0, wx.getSystemInfoSync().windowScrollTop + scrollDistance),
        duration: 300,
        success: () => {
          console.log('页面滚动成功');
        },
        fail: (err) => {
          console.warn('页面滚动失败，尝试查找自定义滚动区域:', err);
          
          // 如果页面滚动失败，尝试查找页面中是否有自定义滚动区域
          this.tryScrollCustomScrollView(elementRect);
        }
      });
    }
  },
  
  // 尝试滚动自定义滚动区域
  tryScrollCustomScrollView(elementRect) {
    const { top, height } = elementRect;
    // 移除.in(this)，使用全局选择器查询页面中的滚动区域
    const query = wx.createSelectorQuery();
    
    // 查找常见的滚动区域类名或ID
    query.selectAll('.scrollarea, .scroll-view, #scrollView').fields({
      rect: true,
      size: true
    });
    
    query.exec((res) => {
      if (res && res[0] && res[0].length > 0) {
        const scrollView = res[0][0];
        
        // 计算元素相对于滚动区域的位置
        const relativeTop = top - scrollView.top;
        const scrollViewHeight = scrollView.height;
        
        // 计算需要滚动的距离，使元素居中
        const targetScrollTop = relativeTop - scrollViewHeight / 2 + height / 2;
        
        // 尝试使用wx.createSelectorQuery获取页面滚动区域实例
        const scrollQuery = wx.createSelectorQuery();
        scrollQuery.select('.scrollarea, .scroll-view').scrollOffset();
        scrollQuery.exec((scrollRes) => {
          if (scrollRes && scrollRes[0]) {
            // 直接设置滚动区域的滚动位置
            const scrollViewComponent = this.selectComponent('.scrollarea, .scroll-view') || this.selectComponent('#scrollView');
            if (scrollViewComponent && scrollViewComponent.scrollTo) {
              scrollViewComponent.scrollTo({
                scrollTop: Math.max(0, targetScrollTop),
                duration: 300
              });
            } else {
              console.warn('未找到可滚动的组件实例');
            }
          }
        });
      }
    });
  },
    
    // 更新位置信息
    updatePosition(elementRect, step) {
      // 获取屏幕尺寸
      const { windowWidth, windowHeight } = wx.getSystemInfoSync();
      
      let highlightRect = {
        top: 0,
        left: 0,
        width: 0,
        height: 0
      };
      
      let tooltipRect = {
        top: 0,
        left: 0
      };
      
      // 提示框位置（top, bottom, left, right）
      let tooltipPosition = step.position || 'bottom';
      // 箭头位置
      let arrowPosition = step.position || 'bottom';
      
      // 提示框宽度（默认值）
      const tooltipWidth = 300;
      // 提示框最小高度，实际高度将根据内容自适应
      const tooltipHeight = 180; // 更新为更符合实际的估算值
      // 提示框与目标元素的间距
      const tooltipGap = 20;
      
      // 如果有元素位置
      if (elementRect) {
        // 高亮区域位置 - 与目标组件的宽高完全一致
        highlightRect = {
          top: elementRect.top,
          left: elementRect.left + 5,
          width: elementRect.width - 10,
          height: elementRect.height
        };
        
        // 如果没有指定position，根据元素在屏幕中的位置和可用空间智能选择
        if (!step.position) {
          // 计算元素中心点和视窗中心点
          const elementCenter = elementRect.top + elementRect.height / 2;
          const viewportCenter = windowHeight / 2;
          
          // 计算各方向的可用空间
          const spaceAbove = elementRect.top; // 上方可用空间
          const spaceBelow = windowHeight - elementRect.top - elementRect.height; // 下方可用空间
          const spaceLeft = elementRect.left; // 左侧可用空间
          const spaceRight = windowWidth - elementRect.left - elementRect.width; // 右侧可用空间
          
          // 计算每个方向是否足够容纳tooltip（考虑tooltip高度、宽度和间距）
          const canFitAbove = spaceAbove > tooltipHeight + tooltipGap;
          const canFitBelow = spaceBelow > tooltipHeight + tooltipGap;
          const canFitLeft = spaceLeft > tooltipWidth + tooltipGap;
          const canFitRight = spaceRight > tooltipWidth + tooltipGap;
          
          // 创建可用方向及其空间大小的映射
          const availablePositions = [];
          if (canFitAbove) availablePositions.push({ position: 'top', space: spaceAbove });
          if (canFitBelow) availablePositions.push({ position: 'bottom', space: spaceBelow });
          if (canFitLeft) availablePositions.push({ position: 'left', space: spaceLeft });
          if (canFitRight) availablePositions.push({ position: 'right', space: spaceRight });
          
          // 根据可用空间选择最佳位置
          if (availablePositions.length > 0) {
            // 按可用空间降序排序
            availablePositions.sort((a, b) => b.space - a.space);
            
            // 如果有多个选项，优先选择上下方向，因为通常更符合阅读习惯
            const bestPosition = availablePositions.find(p => p.position === 'top' || p.position === 'bottom') || availablePositions[0];
            tooltipPosition = bestPosition.position;
            arrowPosition = bestPosition.position;
          } else {
            // 如果没有理想位置，使用默认逻辑（根据元素位置决定上下方向）
            tooltipPosition = elementCenter < viewportCenter ? 'bottom' : 'top';
            arrowPosition = tooltipPosition;
          }
        }
        
        // 提示框位置 - 根据计算的position确定
        switch (tooltipPosition) {
          case 'top':
            // 计算tooltip-top的初始位置
            let initialTop = elementRect.top - tooltipHeight - tooltipGap;
            
            // 确保tooltip不会与目标组件重叠，至少保留tooltipGap的间距
            initialTop = Math.min(initialTop, elementRect.top - tooltipGap);
            
            // 计算tooltip的实际位置
            tooltipRect = {
              top: initialTop,
              left: Math.max(20, Math.min(elementRect.left + elementRect.width / 2 - tooltipWidth / 2, windowWidth - tooltipWidth - 20))
            };
            
            // 检查是否会超出屏幕顶部
            if (tooltipRect.top < 20) {
              // 方案1：尝试将tooltip放在屏幕顶部，但保持与目标组件的距离
              tooltipRect.top = 20;
              
              // 检查这样放置是否会与目标组件重叠
              const tooltipBottom = tooltipRect.top + tooltipHeight;
              const elementTop = elementRect.top;
              
              // 如果tooltip底部与元素顶部的距离小于tooltipGap，说明可能重叠
              if (elementTop - tooltipBottom < tooltipGap) {
                // 方案2：改为显示在下方
                tooltipPosition = 'bottom';
                arrowPosition = 'bottom';
                
                // 重新计算下方位置
                tooltipRect = {
                  top: elementRect.top + elementRect.height + tooltipGap,
                  left: Math.max(20, Math.min(elementRect.left + elementRect.width / 2 - tooltipWidth / 2, windowWidth - tooltipWidth - 20))
                };
              }
            }
            break;
          case 'left':
            // 计算tooltip-left的初始位置
            let initialLeft = elementRect.left - tooltipWidth - tooltipGap;
            
            // 确保tooltip不会与目标组件重叠，至少保留tooltipGap的间距
            initialLeft = Math.min(initialLeft, elementRect.left - tooltipGap);
            
            tooltipRect = {
              top: Math.max(20, Math.min(elementRect.top + elementRect.height / 2 - tooltipHeight / 2, windowHeight - tooltipHeight - 20)),
              left: initialLeft
            };
            
            // 确保不超出屏幕左侧
            if (tooltipRect.left < 20) {
              // 方案1：尝试将tooltip放在屏幕左侧，但保持与目标组件的距离
              tooltipRect.left = 20;
              
              // 检查这样放置是否会与目标组件重叠
              const tooltipRight = tooltipRect.left + tooltipWidth;
              const elementLeft = elementRect.left;
              
              // 如果tooltip右侧与元素左侧的距离小于tooltipGap，说明可能重叠
              if (elementLeft - tooltipRight < tooltipGap) {
                // 方案2：改为显示在右侧
                tooltipPosition = 'right';
                arrowPosition = 'right';
                
                // 重新计算右侧位置
                tooltipRect = {
                  top: Math.max(20, Math.min(elementRect.top + elementRect.height / 2 - tooltipHeight / 2, windowHeight - tooltipHeight - 20)),
                  left: elementRect.left + elementRect.width + tooltipGap
                };
              }
            }
            break;
          case 'right':
            // 计算tooltip-right的初始位置
            initialLeft = elementRect.left + elementRect.width + tooltipGap;
            
            // 确保tooltip不会与目标组件重叠，至少保留tooltipGap的间距
            initialLeft = Math.max(initialLeft, elementRect.left + elementRect.width + tooltipGap);
            
            tooltipRect = {
              top: Math.max(20, Math.min(elementRect.top + elementRect.height / 2 - tooltipHeight / 2, windowHeight - tooltipHeight - 20)),
              left: initialLeft
            };
            
            // 确保不超出屏幕右侧
            if (tooltipRect.left + tooltipWidth > windowWidth - 20) {
              // 方案1：尝试将tooltip放在屏幕右侧，但保持与目标组件的距离
              tooltipRect.left = windowWidth - tooltipWidth - 20;
              
              // 检查这样放置是否会与目标组件重叠
              const tooltipLeft = tooltipRect.left;
              const elementRight = elementRect.left + elementRect.width;
              
              // 如果tooltip左侧与元素右侧的距离小于tooltipGap，说明可能重叠
              if (tooltipLeft - elementRight < tooltipGap) {
                // 方案2：改为显示在左侧
                tooltipPosition = 'left';
                arrowPosition = 'left';
                
                // 重新计算左侧位置
                tooltipRect = {
                  top: Math.max(20, Math.min(elementRect.top + elementRect.height / 2 - tooltipHeight / 2, windowHeight - tooltipHeight - 20)),
                  left: elementRect.left - tooltipWidth - tooltipGap
                };
              }
            }
            break;
          case 'bottom':
          default:
            // 计算tooltip-bottom的初始位置
            let initialBottomTop = elementRect.top + elementRect.height + tooltipGap;
            
            // 确保tooltip不会与目标组件重叠，至少保留tooltipGap的间距
            initialBottomTop = Math.max(initialBottomTop, elementRect.top + elementRect.height + tooltipGap);
            
            tooltipRect = {
              top: initialBottomTop,
              left: Math.max(20, Math.min(elementRect.left + elementRect.width / 2 - tooltipWidth / 2, windowWidth - tooltipWidth - 20))
            };
            
            // 确保不超出屏幕底部
            if (tooltipRect.top + tooltipHeight > windowHeight - 20) {
              // 方案1：尝试将tooltip放在屏幕底部，但保持与目标组件的距离
              tooltipRect.top = windowHeight - tooltipHeight - 20;
              
              // 检查这样放置是否会与目标组件重叠
              const tooltipTop = tooltipRect.top;
              const elementBottom = elementRect.top + elementRect.height;
              
              // 如果tooltip顶部与元素底部的距离小于tooltipGap，说明可能重叠
              if (tooltipTop - elementBottom < tooltipGap) {
                // 方案2：改为显示在上方
                tooltipPosition = 'top';
                arrowPosition = 'top';
                
                // 重新计算上方位置
                tooltipRect = {
                  top: elementRect.top - tooltipHeight - tooltipGap,
                  left: Math.max(20, Math.min(elementRect.left + elementRect.width / 2 - tooltipWidth / 2, windowWidth - tooltipWidth - 20))
                };
              }
            }
            break;
        }
      } else {
        // 全屏居中提示
        tooltipRect = {
          top: windowHeight / 2 - 150,
          left: windowWidth / 2 - 150
        };
        tooltipPosition = 'center';
      }
      
      // 更新数据
      this.setData({
        highlightRect,
        tooltipRect,
        tooltipPosition,
        arrowPosition
      });
    },
    
    // 播放提示框动画
    playTooltipAnimation() {
      // 重置动画
      this.tooltipAnimation.opacity(0).scale(0.8).step();
      this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
      
      // 触发进入动画
      setTimeout(() => {
        this.tooltipAnimation.opacity(1).scale(1).step();
        this.setData({
          tooltipAnimation: this.tooltipAnimation.export(),
          isAnimating: false
        });
      }, 50);
    },
    
    // 处理下一步
    handleNext() {
      if (this.data.isAnimating) return;
      
      const { currentIndex, steps } = this.data;
      
      if (currentIndex < steps.length - 1) {
        // 还有下一步
        this.setData({ 
          currentIndex: currentIndex + 1,
          isAnimating: true
        });
        
        // 隐藏当前提示框
        this.tooltipAnimation.opacity(0).scale(0.8).step();
        this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
        
        // 延迟显示下一步
        this.animationTimer = setTimeout(() => {
          this.showCurrentStep();
        }, 200);
      } else {
        // 最后一步，结束引导
        this.finishTour();
      }
    },
    
    // 处理上一步
    handlePrev() {
      if (this.data.isAnimating) return;
      
      const { currentIndex } = this.data;
      
      if (currentIndex > 0) {
        this.setData({ 
          currentIndex: currentIndex - 1,
          isAnimating: true
        });
        
        // 隐藏当前提示框
        this.tooltipAnimation.opacity(0).scale(0.8).step();
        this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
        
        // 延迟显示上一步
        this.animationTimer = setTimeout(() => {
          this.showCurrentStep();
        }, 200);
      }
    },
    
    // 处理跳过
    handleSkip() {
      this.setData({ isAnimating: true });
      
      // 隐藏动画
      this.tooltipAnimation.opacity(0).scale(0.8).step();
      this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
      
      // 延迟关闭
      this.animationTimer = setTimeout(() => {
        this.triggerEvent('skip', {
          currentStep: this.data.currentStep,
          currentIndex: this.data.currentIndex
        });
        this.setData({ 
          visible: false,
          isAnimating: false
        });
      }, 200);
    },
    
    // 完成引导
    finishTour() {
      this.setData({ isAnimating: true });
      
      // 隐藏动画
      this.tooltipAnimation.opacity(0).scale(0.8).step();
      this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
      
      // 延迟关闭
      this.animationTimer = setTimeout(() => {
        this.triggerEvent('finish', {
          totalSteps: this.data.steps.length
        });
        this.setData({ 
          visible: false,
          isAnimating: false
        });
        
        // 标记引导已完成
        try {
          storageManager.setStorage(storageManager.STORAGE_KEYS.TOUR_GUIDE_COMPLETED, true);
        } catch (error) {
          console.error('Failed to save tour completion status', error);
        }
      }, 200);
    },
    
    // 处理遮罩层点击
    handleOverlayTap() {
      if (!this.data.disableOverlayClose) {
        this.handleSkip();
      }
    },
    
    // 手动切换到指定步骤
    goToStep(index) {
      if (index >= 0 && index < this.data.steps.length) {
        this.setData({ 
          currentIndex: index,
          isAnimating: true
        });
        
        // 隐藏当前提示框
        this.tooltipAnimation.opacity(0).scale(0.8).step();
        this.setData({ tooltipAnimation: this.tooltipAnimation.export() });
        
        // 延迟显示目标步骤
        this.animationTimer = setTimeout(() => {
          this.showCurrentStep();
        }, 200);
      }
    },
    
    // 重置引导
    reset() {
      this.setData({ 
        currentIndex: 0,
        visible: false,
        isAnimating: false
      });
      
      // 清理定时器
      if (this.animationTimer) {
        clearTimeout(this.animationTimer);
      }
    }
  }
});